<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center course_flex_0"
			:style="{ height: (88 + StatusBarRpx) + 'rpx', paddingTop: StatusBarRpx + 'rpx' }">
			<view class='flex flex-wrap align-center justify-between flex-sub course_fd0_0'>
				<view class='flex flex-wrap align-center justify-center course_fd0_0_c0' @tap.stop="handleJumpDiy"
					data-type="back" data-url="1">
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='course_fd0_0_c1_c0'>课程中心</text>
				</view>
				<view class='flex flex-wrap align-center course_fd0_0_c0'>
				</view>
			</view>

		</view>
		<view :style="{ height: (88 + StatusBarRpx) + 'rpx' }"></view>
		<!-- <benben-goods-classify :top='104' threeLevel='false' :handle-id.sync='id' :lists='list'>
		</benben-goods-classify> -->
		<view class="scroll_content" :style="{ height: (phoneHeight * 2) - (148 + StatusBarRpx) + 'rpx' }">
			<scroll-view class="scroll_left" :scroll-y="true" :style="{ height: (phoneHeight * 2) - (148 + StatusBarRpx) + 'rpx' }">
				<view class="scroll_left_item" v-for="(v, k) in leftList" :key="k" :class="coursecate_id == v.aid ? 'active' : ''" @tap.stop="selectCategor(v.aid)">
					<view class="scroll_left_item_view">
						{{v.cate_name}}
					</view>
				</view>
			</scroll-view>
			<scroll-view class="scroll_right" :scroll-y="true" :style="{ height: (phoneHeight * 2) - (148 + StatusBarRpx) + 'rpx' }">
				<view class="loading_css" v-if="isShow">
					<u-loading size="36" color="#cd962d"></u-loading>
					<view class="loading_text">加载中</view>
				</view>
				<block v-else>
					<view class='flex flex-wrap align-center justify-end searchResult_fd3_0' v-for="(v, k) in list" :key="k" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/course/courseDetails/courseDetails?aid=${v.aid}`">
						<view class='flex flex-wrap align-center searchResult_fd3_0_c0'>
							<image class='searchResult_fd3_0_c0_c0' mode="aspectFill" :src='v.thumb'></image>
						</view>
						<view class='flex flex-direction flex-wrap align-stretch flex-sub'>
							<view class='searchResult_fd3_0_c1_c0'>{{v.name}}</view>
							<view class='flex flex-wrap align-center searchResult_fd3_0_c1_c1'>
								<text class='searchResult_fd3_0_c1_c1_c0'>发布：</text>
								<text class='searchResult_fd3_0_c1_c1_c0'>{{v.create_time}}</text>
							</view>
							<view class='flex flex-wrap align-center justify-between searchResult_fd3_0_c1_c2'>
								<view class='flex flex-wrap align-center'>
									<text class='searchResult_fd3_0_c1_c1_c0'>共</text>
									<text class='searchResult_fd3_0_c1_c1_c0'>{{v.chapter_num}}</text>
									<text class='searchResult_fd3_0_c1_c1_c0'>章节</text>
								</view>
								<view class='flex flex-wrap align-center'>
									<text class='searchResult_fd3_0_c1_c1_c0'>{{v.study_num}}</text>
									<text class='searchResult_fd3_0_c1_c1_c0'>人学习</text>
								</view>
							</view>
						</view>
					</view>
					<view class="noData" v-if="list.length == 0 && !isShow">
						<image src="/static/empty/no.png"></image>
						<view>没有课程~</view>
					</view>
				</block>
				
			</scroll-view>
		</view>


	</view>
</template>
<script>
	export default {
		components: {},

		data() {
			return {
				id: '',
				phoneHeight: 0, //屏幕可用高度
				topHeight: 0, //滑块上方高度
				bottomHeight: 0, //底部高度
				scrollerHeight: "",
				
				isShow: true,
				leftList: [],  // 课程分类
				coursecate_id: "",  // 课程分类id
				list: [],  // 课程列表
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
		},
		watch: {},
		onLoad(options) {
			this.getCourseCategor();
		},
		onUnload() {

		},
		onReady() {
			var height
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					_this.phoneHeight = res.windowHeight;
					//console.log("phoneHeight:" + res.windowHeight)
					// let view = uni.createSelectorQuery().select("#head"); //局部滑块
					// view.boundingClientRect(data => {
					// 	_this.topHeight = data.height;
					// 	//console.log("topHeight:"+data.height)
					// 	let otherview = uni.createSelectorQuery().select("#foot");
					// 	otherview.boundingClientRect(data => {
					// 		_this.bottomHeight = data.height
					// 		//console.log("bottomHeight:"+data.height)
					// 		height = _this.phoneHeight - _this.topHeight - _this.bottomHeight;
					// 		//console.log("scrollerHeight:"+height)
					// 	}).exec();
					// }).exec();
				},
			});
			console.log(this.phoneHeight);
		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 获取课程分类  post647eab99d93f6
			getCourseCategor() {
				this.$api.post(global.apiUrls.post647eab99d93f6, {
					
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.leftList = res.data.data;
						if (this.leftList.length > 0) {
							this.coursecate_id = this.leftList[0].aid;
							this.getCourseList();
						} else {
							this.isShow = false;
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			selectCategor(aid) {
				this.coursecate_id = aid;
				this.isShow = true;
				this.getCourseList();
			},
			// 获取课程列表  post647eac5a55c0b
			getCourseList() {
				this.$api.post(global.apiUrls.post647eac5a55c0b, {
					coursecate_id: this.coursecate_id
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.list = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.scroll_content {
		display: flex;
		padding: 16rpx 0 20rpx;

		.scroll_left {
			// height: 100%;
			width: 192rpx;
			margin-right: 20rpx;
			background: #fff;
			border-radius: 0px 12px 12px 0px;
			overflow: hidden;

			.scroll_left_item {
				width: 100%;
				height: 136rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 26rpx;
				font-size: 28rpx;
				position: relative;

				.scroll_left_item_view {
					-webkit-line-clamp: 2;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
			}

			.active {
				color: #CD962D;
				background: #F5EAD5;
			}
			.active::after {
				content: " ";
				width: 8rpx;
				height: 34rpx;
				background: #CD962D;
				border-radius: 7px;
				position: absolute;
				left: 4rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.scroll_right {
			// height: 100%;
			width: calc(100% - 212rpx);
			background: #fff;
			padding: 4rpx 0;
		}
	}
	
	
	.searchResult_fd3_0_c1_c2 {
		margin: 10rpx 0rpx 0rpx 0rpx;
	}
	
	.searchResult_fd3_0_c1_c1_c0 {
		color: #636363;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 40rpx;
	}
	
	.searchResult_fd3_0_c1_c1 {
		// margin: 10rpx 0rpx 0rpx 0rpx;
	}
	
	.searchResult_fd3_0_c1_c0 {
		height: 82rpx;
		padding-top: 8rpx;
		color: #333333;
		font-size: 28rpx;
		font-weight: 700;
		// line-height: 40rpx;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	
	.searchResult_fd3_0_c0_c0 {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
	}
	
	.searchResult_fd3_0_c0 {
		border-radius: 16rpx;
		margin: 0rpx 24rpx 0rpx 0rpx;
	}
	
	.searchResult_fd3_0 {
		// border-bottom: 1px solid #eee;
		padding: 20rpx 24rpx 20rpx 24rpx;
	}
	
	
	


	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(248, 248, 248, 1);
		background-size: 100% auto !important;
	}

	.course_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.course_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 700;
		color: #333333;
		line-height: 88rpx;
	}

	.course_fd0_0_c0 {
		width: 50rpx;
		height: 50rpx;
	}

	.course_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
	}
</style>